• 닉네임 중복 확인 API 호출 커스텀 훅 추가
• TermsDrawer에서 약관 동의 전 닉네임 중복 검증
• 다양한 API 응답 형식 지원하는 파서 구현

닉네임 중복 확인 커스텀 훅 구현

• 닉네임 중복 확인 API 호출 커스텀 훅 신규 생성
• 다양한 응답 형식 지원하는 파서 함수 구현
• React Query의 useMutation 활용한 비동기 처리
• 재시도 없이 단일 요청으로 처리하도록 설정

hooks/useNicknameAvailability.ts

약관 동의 전 닉네임 중복 검증 로직 추가

• useNicknameAvailability 훅 임포트 및 초기화
• 약관 동의 버튼 클릭 시 닉네임 중복 검증 로직 추가
• 중복 닉네임 시 모달 열기 방지 및 사용자 알림
• 에러 처리 및 사용자 피드백 메시지 추가

app/profile-image/_components/TermsDrawer.tsx

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

pr_commands = ["/describe", ...]

pr_commands = ["/describe --pr_description.use_description_markers=true", ...]

[pr_description]
extra_instructions="""- The PR title should be in the format: '<PR type>: <title>'
- The title should be short and concise (up to 10 words)
- ...
"""

See the describe usage page for a comprehensive guide on using this tool.

Description

TermsDrawer checks availability with a trimmed nickname but submits the raw nickname string, so a
nickname with leading/trailing spaces can pass the check for the trimmed value yet be submitted as a
different value (or be server-trimmed into a duplicate). This can cause signup failures or allow
unintended “distinct” nicknames that only differ by whitespace.

Code

app/profile-image/_components/TermsDrawer.tsx[R154-158]

+          const nickname = (profile.nickname || "").trim();
+
+          try {
+            const isAvailable = await checkNicknameAvailability(nickname);
+

Evidence

The new code trims the nickname for the availability API call, but the signup payload still uses the
untrimmed profile.nickname. The start button enablement also uses trim(), so whitespace-padded
nicknames can reach this flow and trigger the mismatch.

app/profile-image/_components/TermsDrawer.tsx[149-171]
app/profile-image/_components/TermsDrawer.tsx[96-113]
app/profile-image/_components/ScreenProfileImage.tsx[39-42]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`TermsDrawer` trims `profile.nickname` for the availability check, but submits `profile.nickname` untrimmed. This can let whitespace-padded nicknames pass the check for a different canonical value and then submit a different string.
## Issue Context
The start button is enabled based on `nickname.trim().length`, so users can proceed with whitespace-padded nicknames.
## Fix Focus Areas
- app/profile-image/_components/TermsDrawer.tsx[96-129]
- app/profile-image/_components/TermsDrawer.tsx[154-165]
- (optional) app/profile-image/_components/ScreenProfileImage.tsx[23-29]
## Suggested change
- Use `const normalizedNickname = (profile.nickname || "").trim();`
- Pass `normalizedNickname` both to `checkNicknameAvailability()` and into `submitData.nickname`.
- Optionally trim on `updateProfile({ nickname: val.trimStart()? })` depending on desired UX, but at minimum trim on submit.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

The trigger onClick fires an async availability request without guarding against repeated clicks
while the request is in-flight, allowing multiple concurrent GETs. This can waste API calls and
create inconsistent UX (e.g., multiple alerts, or an error alert from one request while another
succeeds and opens the drawer).

Code

app/profile-image/_components/TermsDrawer.tsx[R151-171]

+        onClick: async (e: React.MouseEvent<HTMLElement>) => {
       children.props.onClick?.(e);
-          setIsOpen(true);
+
+          const nickname = (profile.nickname || "").trim();
+
+          try {
+            const isAvailable = await checkNicknameAvailability(nickname);
+
+            if (!isAvailable) {
+              alert("중복된 닉네임입니다. 다른 닉네임을 입력해 주세요.");
+              return;
+            }
+
+            setIsOpen(true);
+          } catch (error) {
+            console.error("Failed to check nickname availability:", error);
+            alert(
+              "닉네임 중복 확인에 실패했습니다. 잠시 후 다시 시도해 주세요.",
+            );
+          }
     },

Evidence

The click handler always calls checkNicknameAvailability and has no early-return based on a
pending state. The hook is a plain useMutation, and the component does not consume any pending
flag to disable/ignore subsequent clicks during the request.

app/profile-image/_components/TermsDrawer.tsx[149-171]
hooks/useNicknameAvailability.ts[56-61]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Users can click the TermsDrawer trigger multiple times while nickname availability is being checked, causing concurrent requests and inconsistent alerts/open state.
## Issue Context
The current `onClick` handler always runs the async check; there is no in-flight guard.
## Fix Focus Areas
- app/profile-image/_components/TermsDrawer.tsx[149-173]
- hooks/useNicknameAvailability.ts[56-61]
## Suggested change
- In `TermsDrawer`, destructure `isPending` from `useNicknameAvailability()` and add:
- `if (isCheckingNickname) return;` at the start of onClick
- and/or pass `disabled={disabled || isCheckingNickname}` into the trigger element (if it is a button)
- Optionally render a spinner or change button text while checking.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

• app/profile-image/_components/TermsDrawer.tsx
  • useNicknameAvailability 훅을 임포트했습니다.
  • 닉네임 중복 확인을 위한 checkNicknameAvailability 뮤테이션을 사용하도록 변경했습니다.
  • 자식 요소의 onClick 핸들러에 닉네임 중복 확인 로직을 추가하여, 중복된 닉네임일 경우 알림을 표시하고 드로어가 열리지 않도록 했습니다.
  • 닉네임 중복 확인 실패 시 오류를 처리하는 로직을 추가했습니다.
• hooks/useNicknameAvailability.ts
  • 닉네임 중복 확인을 위한 useNicknameAvailability 커스텀 훅을 새로 추가했습니다.
  • API 응답을 파싱하여 닉네임 사용 가능 여부를 반환하는 parseNicknameAvailability 함수를 정의했습니다.
  • /api/auth/signup/nickname/availability 엔드포인트로 GET 요청을 보내 닉네임 중복을 확인하는 checkNicknameAvailability 함수를 구현했습니다.

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.